<template>
    <el-table
    :data="playList"
    style="width: 100%"
    @cell-mouse-enter='mouseEnter'
    @cell-mouse-leave='mouseLeave'>
    <el-table-column
      label="标题"
      width="180">
        <template #default="scope">
            <span class='music-list-title' @click="navToSongPage(scope.row.id)">{{scope.row.name}}</span>
        </template>
    </el-table-column>
    <el-table-column
      label="时长"
      width="180">
      <template #default="scope">
            <span v-show='scope.row.id !== currentMouseIndex' class='music-list-time'>{{scope.row.dt}}</span>
            <span v-show='scope.row.id == currentMouseIndex' class='music-list-time'>
                <i class="el-icon-star-on" @click="starOn(scope.row)"></i>
                <i class="el-icon-delete" @click="deleteFromList(scope.row)"></i>
                <i class="el-icon-download" @click="download(scope.row)"></i>
            </span>
      </template>
    </el-table-column>
    <el-table-column
      label="歌手">
        <template #default="scope">
            <span>
                <template v-for='ar in scope.row.ar' :key="ar.id">
                    <span class='music-list-title' @click="navToArtistPage(ar.id)">{{ar.name+' '}}</span>
                </template>
            </span>
        </template>
    </el-table-column>
  </el-table>
</template>
<script lang="ts">
import { defineComponent, onMounted, reactive, toRefs } from 'vue'
import { MusicNode } from '@/interface/music'
import { player } from '@/utils/player'
export default defineComponent({
    setup() {
        const state = reactive({
            playList: Array<MusicNode>
        })
        onMounted(()=>{
            state.playList = player.playList
        })
        return {
            ...toRefs(state)
        }
    },
})
</script>
